﻿@page "/scheduler/room-scheduler"

@using Syncfusion.Blazor.Schedule
@inherits SampleBaseComponent;

<SampleDescription>
  <p>  This demo showcases the Scheduler that lists out the meeting rooms of an office and its availability.</p>  
</SampleDescription>
<ActionDescription>
  <p> Here, the timeline view is grouped with single level of resources by using the <code>Group</code> property. The resource header displayed at the left panel is customized to render as columns with the help of <code>ResourceHeaderTemplate</code>. </p>
  <p> <b>Note:</b> The dates which lies beyond the current date set to Scheduler through <code>SelectedDate</code> property is considered as the past dates here in this sample. </p>
</ActionDescription>

<div class="control-section">
    <div class="content-wrapper">
        <SfSchedule TValue="ScheduleData.RoomData" Width="100%" Height="650px" @bind-SelectedDate="@CurrentDate" @bind-CurrentView="@CurrentView">
            <ScheduleWorkHours Start="08:00" End="18:00"></ScheduleWorkHours>
            <ScheduleViews>
                <ScheduleView MaxEventsPerRow="1" Option="View.TimelineDay">
                    <ScheduleViewTimeScale SlotCount="1" Interval="60"></ScheduleViewTimeScale>
                </ScheduleView>
                <ScheduleView MaxEventsPerRow="1" Option="View.TimelineWeek">
                    <ScheduleViewTimeScale SlotCount="1" Interval="60"></ScheduleViewTimeScale>
                </ScheduleView>
            </ScheduleViews>
            <ScheduleGroup EnableCompactView="false" Resources="@GroupData"></ScheduleGroup>
            <ScheduleResources>
                <ScheduleResource TItem="ScheduleData.RoomsData" TValue="int[]" DataSource="@ResourceData" Field="RoomId" Title="Room Type" Name="MeetingRoom" TextField="Name" IdField="Id" ColorField="Color" AllowMultiple="true"></ScheduleResource>
            </ScheduleResources>
            <ScheduleTemplates>
                <ResourceHeaderTemplate>
                    <div class='template-wrap'>
                        <div class="room-name">@(((context as TemplateContext).ResourceData as ScheduleData.RoomsData).Name)</div>
                        <div class="room-type">@(((context as TemplateContext).ResourceData as ScheduleData.RoomsData).Capacity)</div>
                        <div class="room-capacity">@(((context as TemplateContext).ResourceData as ScheduleData.RoomsData).Type)</div>
                    </div>
                </ResourceHeaderTemplate>
            </ScheduleTemplates>
            <ScheduleEventSettings DataSource="@DataSource">
                <ScheduleField>
                    <FieldSubject Title="Travel Summary" Name="Subject"></FieldSubject>
                    <FieldLocation Title="Source" Name="Location"></FieldLocation>
                    <FieldDescription Title="Comments" Name="Description"></FieldDescription>
                    <FieldStartTime Title="Departure Time" Name="StartTime"></FieldStartTime>
                    <FieldEndTime Title="Arrival Time" Name="EndTime"></FieldEndTime>
                </ScheduleField>
            </ScheduleEventSettings>
        </SfSchedule>
    </div>
</div>

@code{
    private View CurrentView = View.TimelineWeek;
    public DateTime CurrentDate = new DateTime(2020, 1, 1);
    public List<ScheduleData.RoomData> DataSource = new ScheduleData().GetRoomData();
    public string[] GroupData = new string[] { "MeetingRoom" };
    private List<ScheduleData.RoomsData> ResourceData { get; set; } = new List<ScheduleData.RoomsData> {
        new ScheduleData.RoomsData { Name = "Jammy", Id = 1, Color = "#ea7a57", Capacity = 20, Type = "Conference" },
        new ScheduleData.RoomsData { Name = "Tweety", Id = 2, Color = "#7fa900", Capacity = 7, Type = "Cabin" },
        new ScheduleData.RoomsData { Name = "Nestle", Id = 3, Color = "#5978ee", Capacity = 5, Type = "Cabin" },
        new ScheduleData.RoomsData { Name = "Phoenix", Id = 4, Color = "#fec200", Capacity = 15, Type = "Conference" },
        new ScheduleData.RoomsData { Name = "Mission", Id = 5, Color = "#df5286", Capacity = 25, Type = "Conference" },
        new ScheduleData.RoomsData { Name = "Hangout", Id = 6, Color = "#00bdae", Capacity = 10, Type = "Cabin" },
        new ScheduleData.RoomsData { Name = "Rick Roll", Id = 7, Color = "#865fcf", Capacity = 20, Type = "Conference" },
        new ScheduleData.RoomsData { Name = "Rainbow", Id = 8, Color = "#1aaa55", Capacity = 8, Type = "Cabin" },
        new ScheduleData.RoomsData { Name = "Swarm", Id = 9, Color = "#df5286", Capacity = 30, Type = "Conference" },
        new ScheduleData.RoomsData { Name = "Photogenic", Id = 10, Color = "#710193", Capacity = 25, Type = "Conference" }
    };
}
<style>
    .e-schedule .e-timeline-view .e-resource-left-td {
        vertical-align: bottom;
    }

    .e-schedule.e-device .e-timeline-view .e-resource-left-td {
        width: 75px;
    }

    .e-schedule .e-timeline-view .e-resource-left-td .e-resource-text {
        display: flex;
        font-weight: 500;
        padding: 0;
    }

        .e-schedule .e-timeline-view .e-resource-left-td .e-resource-text > div {
            border-right: 1px solid rgba(0, 0, 0, 0.12);
            border-top: 1px solid rgba(0, 0, 0, 0.12);
            flex: 0 0 33.3%;
            font-weight: 500;
            height: 36px;
            line-height: 34px;
            padding-left: 5px;
        }

            .e-schedule .e-timeline-view .e-resource-left-td .e-resource-text > div:last-child {
                border-right: 0;
            }

    .e-schedule .template-wrap {
        display: flex;
        height: 100%;
        text-align: left;
    }

        .e-schedule .template-wrap > div {
            border-right: 1px solid rgba(0, 0, 0, 0.12);
            flex: 0 0 33.3%;
            font-weight: 500;
            line-height: 58px;
            overflow: hidden;
            padding-left: 5px;
            text-overflow: ellipsis;
        }

            .e-schedule .template-wrap > div:last-child {
                border-right: 0;
            }

    .e-schedule .e-timeline-view .e-resource-cells,
    .e-schedule .e-timeline-month-view .e-resource-cells {
        padding-left: 0;
    }

    .e-schedule .e-timeline-view .e-date-header-wrap table col,
    .e-schedule .e-timeline-view .e-content-wrap table col {
        width: 100px;
    }

    .e-schedule .e-read-only {
        opacity: .8;
    }

    @@media (max-width: 550px) {
        .e-schedule .e-timeline-view .e-resource-left-td {
            width: 100px;
        }

            .e-schedule .e-timeline-view .e-resource-left-td .e-resource-text > div,
            .e-schedule .template-wrap > div {
                flex: 0 0 100%;
            }

                .e-schedule .template-wrap > div:first-child {
                    border-right: 0;
                }

                .e-schedule .e-timeline-view .e-resource-left-td .e-resource-text > div:first-child {
                    border-right: 0;
                }

        .e-schedule .room-type,
        .e-schedule .room-capacity {
            display: none;
        }
    }
</style>